<template lang="">
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>待审核商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">

      <el-table :data="tableData" border style="width: 100%" v-if='tableData!=""'>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="商品名称">
                <span>{{ props.row.nameeds }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <a href="#" style="color: #5e69ad;"><span>{{ props.row.Commodity }}</span></a>
              </el-form-item>

              <el-form-item label="商品编号">
                <span>{{ props.row.Storeid }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{{ props.row.classification }}</span>

              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.describes }}</span>
              </el-form-item>
              <el-form-item label="商品图片">
                <img :src="props.row.picture" alt="" srcset="" style="width: 200px;height: 200px;">
              </el-form-item>
              <el-form-item label="商品价格/元">
                <span style="color: #e4393c;font-size: 20px;"><i style="font-style: normal;font-size: 14px;">￥</i>{{
                  props.row.Price|rounding
                  }}</span>
              </el-form-item>
            </el-form>
          </template>
</el-table-column>
<el-table-column prop="id" label="商品ID">
</el-table-column>
<el-table-column prop="Storeid" label="商品编号">
</el-table-column>
<el-table-column label="商品上架者">
    <template v-slot='c'>
            <el-tag size="small">{{c.row.username}}</el-tag>
          </template>
</el-table-column>

<el-table-column label="所属店铺">
    <template v-slot='v'>
            <a href="#" style="color: #5e69ad;"><span>{{ v.row.Commodity }}</span></a>

          </template>
</el-table-column>
<el-table-column label="审核状态">
    <template v-slot='v'>
            <el-tag type='warning'>{{ v.row.stare }}</el-tag>
          </template>
</el-table-column>
<el-table-column prop="Repository" label="商品仓库/件">
</el-table-column>
<el-table-column label=" 上架时间">
    <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.datetime }}</span>
          </template>
</el-table-column>
<el-table-column label="操作">
    <template v-slot='scope'>
            <el-button type="primary" icon="el-icon-edit" @click="shenhe(scope.row)">审核</el-button>
          </template>
</el-table-column>

</el-table>
<el-pagination @size-change="handleSizeChange" v-if='tableData!=""' @current-change="handleCurrentChange" :current-page.sync="page.currentPage" :page-sizes="[1,2,3,5,10]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
    background>
</el-pagination>
<el-empty :image-size="200" v-if='tableData==""'></el-empty>
<el-dialog title="审核" :visible.sync="dialogVisible" width="40%" :before-close="handleClose" @close='editDiaclose'>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="审核状态" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
                <el-radio label="已通过"></el-radio>
                <el-radio label="未通过"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="失败原因" prop="desc" v-if='ruleForm.resource=="未通过"'>
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="edit">确 定</el-button>
        </span>
</el-dialog>

</el-card>
</div>
</template>
<script>
    export default {
        data() {
            return {
                //表格
                tableData: [],
                dialogVisible: false,
                //id
                cc: {},
                //分页
                page: {
                    currentPage: 1, // 当前页
                    total: 0, // 数据总条数
                    pageSize: 3, // 每页条数
                },
                ruleForm: {

                    resource: '',
                    desc: '',

                },
                rules: {
                    resource: [{
                        required: true,
                        message: '请选择活动资源',
                        trigger: 'change'
                    }],
                    desc: [{
                        required: true,
                        message: '请填写活动形式',
                        trigger: 'blur'
                    }]
                }
            }
        },
        //过滤器
        filters: {
            rounding(v) {
                return (Math.round(v * 100) / 100).toFixed(2);
            }
        },
        methods: {
            editDiaclose() {
                this.$refs.ruleForm.resetFields()
            },
            getTo() {
                this.$axios.get('/shop/getTo', {
                    params: {
                        pageSize: this.page.pageSize,
                        currentPage: this.page.currentPage,
                    }
                }).then(res => {
                    this.page.total = res.data.data.count
                    this.tableData = res.data.data.result;
                })
            },
            shenhe(cc) {
                this.cc = cc
                this.dialogVisible = true
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            edit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        this.$axios.put(`/shop/editshenhe/${this.cc.id}`, {
                            data: this.ruleForm
                        }).then(res => {

                            return this.$axios.post(`/shop/addshenhe`, {
                                data: {
                                    data: this.cc.id,
                                    shll: this.$cookie.get('user')
                                }
                            }).then(res => {
                                return this.$axios.delete(`/shop/editshenhe/${this.cc.id}`).then(res => {
                                    if (res.data.status == 200) {
                                        this.$message({
                                            type: 'success',
                                            message: '审核成功!'
                                        });
                                        this.getTo()
                                        this.dialogVisible = false;
                                        //location.reload();
                                    } else {
                                        this.$message.error("审核失败");
                                    }
                                })
                            })
                        })
                    } else {
                        this.$message.error("表单校验失败，请检查");
                        return false;
                    }
                })

            },
            // 每页显示条数改变 就会触发这个函数
            handleSizeChange(val) {
                // 保存每页显示的条数
                this.page.pageSize = val;
                this.getTo()
            },
            // 当前页码改变 就会触发这个函数
            handleCurrentChange(val) {
                // 保存当前页码
                this.page.currentPage = val;
                this.getTo()
            },
        },
        created() {
            this.getTo()
            this.page.currentPage = Number(localStorage.getItem('paginationsq')) || 1;
            this.handleCurrentChange(this.page.currentPage)
        },
        beforeUpdate() {
            localStorage.setItem('paginationsq', this.page.currentPage)

        },
        beforeDestroy() {
            localStorage.setItem('paginationsq', 1)

        },
    }
</script>
<style lang="less">
    .demo-table-expand {
        font-size: 0;
    }
    
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
    }
</style>